<template>
  <div class="article-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <BreadCard>评论管理</BreadCard>
      </div>
       <el-table
        :data="comments"
        style="width: 100%"
        :default-sort = "{prop: 'title', order: 'descending'}"
        >
        <el-table-column
          prop="title"
          label="文章标题"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="total_comment_count"
          label="总评论数"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="fans_comment_count"
          label="粉丝评论数"
          sortable>
        </el-table-column>
        <el-table-column
          label="评论状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.comment_status ? 'primary': 'danger'">{{scope.row.comment_status ? '打开':'关闭'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <!-- 三元是运算操作符，if是控制语句 -->
          <template slot-scope="scope">
              <el-button
                size="mini"
                :loading="scope.row.sendMsgLoading"
                :type="scope.row.comment_status ? 'danger':'primary'"
                @click="handleEdit(scope.$index, scope.row)">{{scope.row.comment_status ? '关闭评论':'打开评论'}}</el-button>
            </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件
        它只是根据total和page-size来显示页码，而与具体的表格数据无关

        1. total是总条数数；
        默认情况，它会以每页10条进行计算总页数
        2. current-change。当点击页码时，它会触发,会传入当前的页码。
      -->
      <el-pagination
        :disabled="loading"
        style="margin-top:10px;"
        background
        layout="prev, pager, next"
        @current-change="hPageChange"
        :page-size="per_page"
        :total="total_count">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'comment',
  created () {
    this.getComment()
  },
  data () {
    return {
      loading: false,
      page: 1,
      per_page: 10,
      total_count: null,
      comments: []
    }
  },
  methods: {
    async getComment () {
      const res = await this.$http({
        url: '/mp/v1_0/articles',
        method: 'GET',
        params: {
          page: this.page,
          per_page: this.per_page,
          response_type: 'comment'
        }
      })
      console.log('loadComment', res)
      this.comments = res.data.data.results
      this.total_count = res.data.data.total_count
    },
    async handleEdit (index, row) {
      const id = row.id.toString()
      console.log('loading', row.sendMsgLoading)
      row.sendMsgLoading = true
      console.log('loading', row.sendMsgLoading)
      try {
        // 发请求
        await this.$http({
          method: 'PUT',
          url: '/mp/v1_0/comments/status',
          params: {
            article_id: id
          },
          data: {
            allow_comment: !row.comment_status
          }
        })
        // 更新数据
        row.comment_status = !row.comment_status
        this.$message.success('操作成功')
        row.sendMsgLoading = false
      } catch {
        this.$message.error('操作失败')
        row.sendMsgLoading = false
      }
    },
    hPageChange (val) {
      this.page = val
      this.getComment()
    }
  }
}
</script>

<style>

</style>
